<template>
  <v-dialog
    :title="title"
    :isVisible="isShow"
    :isNest="true"
    custClass="dialog-box"
    @close="closeDialog">
    <template slot="dialog-head">
      <v-toolbar v-on:click="handleToolClick" :buttonsObj="uploadButtons"></v-toolbar>
    </template>
    <template slot="dialog-cont">
      <el-table :data="materialList"  v-loading="tableLoading" ref="table" class="dialog-main">
        <el-table-column prop="Name" label="文件名" width="auto">
          <template slot-scope="scope">
            <a href="javascript:void(0);" class="file-btn" @click="selectPic(scope.row)">
              <img :src="showPic(scope.row)"/>
              <span>{{ scope.row.Name }}</span>
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="Size" label="大小" width="auto">
          <template slot-scope="scope">
            <span> {{ formatFileSize(scope.row.Size) }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建日期" width="auto">
          <template slot-scope="scope">
            <span> {{ getDateTime(scope.row.CreateTime) }} </span>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </v-dialog>
</template>
<script>
import VDialog from '../iDialog/iDialog'
import VToolbar from '../iToolbar/iToolbar'
import api from '../../../../api/url'
import ajax from '../../../../api/ajax/ajax'
export default {
  name: 'iPicSelect',
  components: {
    VDialog,
    VToolbar
  },
  watch: {
    isShow: {
      handler: function (val) {
        this.isShow = val
        if (val) {
          this.getMaterialList('')
        }
      },
      deep: true
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      materialList: [],
      tableLoading: true,
      uploadButtons: [
        { text: '全部文件', oprType: 'allFile' }
      ]
    }
  },
  methods: {
     // 工具栏操作
    handleToolClick (oprType) {
      switch (oprType) {
        case 'allFile':
          this.getMaterialList('')
          break
        default:
          break
      }
    },
    // 获取全部素材
    getMaterialList (url) {
      ajax.get(api.QUERY_MATERIAL_FILE + '?url=' + url).then(res => {
        if (res !== null && res.length > 0) {
          this.materialList = res
        } else {
          this.materialList = []
        }
        this.tableLoading = false
      })
    },
    // 列表显示图片
    showPic (data) {
      if (data.IsDir) {
        return '/static/img/wenjianjia.872dd90.png'
      } else {
        let zipType = ['zip', 'rar', 'jar', '7z', 'tar', 'gz']
        let imageType = ['png', 'jpg', 'gif', 'jpeg']
        let suffix = data.Name.split('.').pop()
        if (imageType.indexOf(suffix) !== -1) {
          return data.Root + (data.Url !== undefined ? data.Url : '') + '/' + data.Name
        } else if (zipType.indexOf(suffix) !== -1) {
          return '/static/img/zip.png'
        } else {
          return '/static/img/image.png'
        }
      }
    },
    // 选中列表图片
    selectPic (data) {
      let pUrl = ''
      if (data.IsDir) {
        let Url = data.Url !== undefined ? data.Url + '/' + data.Name : '/' + data.Name
        this.getMaterialList(Url)
      } else {
        pUrl = data.Root + (data.Url !== undefined ? data.Url : '') + '/' + data.Name
        this.closeDialog(pUrl)
      }
    },
    // 转换日期格式
    getDateTime (time) {
      let date = new Date(time * 1000).toLocaleString().split(' ')[0]
      return date
    },
    // 关闭弹窗
    closeDialog (data) {
      this.$emit('close', data)
    },
    // 文件大小处理
    formatFileSize (fileSize) {
      if (fileSize === 0) {
        return '-'
      } else if (fileSize < 1024) {
        return fileSize + 'B'
      } else if (fileSize < (1024 * 1024)) {
        return (fileSize / 1024).toFixed(2) + 'KB'
      } else if (fileSize < (1024 * 1024 * 1024)) {
        return (fileSize / (1024 * 1024)).toFixed(2) + 'MB'
      } else {
        return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
      }
    }
  },
  created () {
    this.getMaterialList('')
  }
}
</script>
<style lang="stylus">
.dialog-box
  .dialog-main
    .file-btn
      display block
      img
        float left
        width 30px
        height 30px
      span
        display block
        margin-left 40px
        line-height 24px
        padding 3px 0
        word-break break-all
  #iap-toolbar
    padding 0 0 10px
</style>
